var xhr = new XMLHttpRequest();
xhr.open('get', '../nav2.json');
xhr.send();
xhr.onload = function () {
  var data = JSON.parse(xhr.responseText);
  Render(data);
}

function Render(data) {
  var ul = document.querySelector('.fenlei ul');
  ul.innerHTML = data.map(function (item, index) {
    return `<li category="${item.category}" class=${index == 0 ? 'active' : ''} active">${item.name}</li>`
  }).join('')
}

var fenlei = document.querySelector('.fenlei');
fenlei.onclick = function () {
  var e = window.event;
  var li = document.querySelectorAll('.fenlei li');
  for (var i = 0; i < li.length; i++) {
    li[i].classList.remove('active');
  }
  e.target.classList.add('active');
  var category = e.target.getAttribute('category');
  if (category) {
    getList({ category: category })
  } else {
    getList()
  }
}

getList()
function getList(option) {
  var listXhr = new XMLHttpRequest();
  var url = 'https://muse.huaban.com/api/v1/users/';
  if (option) {
    var str = '';
    for (var key in option) {
      str += key + '=' + option[key] + '&'
    }
    str = str.substr(0, str.length - 1);
    url = url + '?' + str;
  }
  listXhr.open('get', url)
  listXhr.send();
  listXhr.onload = function () {
    var data = JSON.parse(listXhr.responseText);
    if (data.length == 0) {
      var ul = document.querySelector('.list ul');
      ul.innerHTML = '<div class ="noData">此分类暂时没有数据</div>'
    }
    var newList = [data[0]];
    for (var i = 0; i < data.length; i++) {
      var flag = newList.every(function (item) {
        return item.user_id != data[i].user_id
      })
      if (flag == true) {
        newList.push(data[i])
      }
    }
    console.log(newList)
    listRender(newList)
  }
}


function listRender(data) {
  var ul = document.querySelector('.list ul');
  var unit = {
    designer: '设计师',
    illustrator: '插画/漫画师',
    ui_designer: 'UI/UX设计师',
    artisan: '手工艺人',
    photographer: '摄影师',
    industrial_designer: '工业设计师',
    animator: '动画师',
    other: '其他'
  }
  ul.innerHTML = data.map(function (item) {
    return `<li>
              <div class="head">
                <p>${item.username}</p>
                <div class="con">
                  <p class="second">${item.service_count}个设计服务</p>
                  <span>评价:</span>
                  <span class="rating">
                  <i class="iconfont icon-star actives"></i>
                  <i class="iconfont icon-star actives"></i>
                  <i class="iconfont icon-star actives"></i>
                  <i class="iconfont icon-star actives"></i>
                  <i class="iconfont icon-star actives"></i>
                  </span>
                </div>
                <div class="tag">${item.category.map(function (i) {
      return `<i>${unit[i]}</i>`
    }).join('')}</div>
                <img user_id="${item.user_id}" src="https://hbimg.huaban.com/${item.avatar.key}_/both/140x140" alt="">
              </div>
              <h4>${item.desc}</h4>
            </li>`
  }).join('');

  // var li = document.querySelector('.list ul li');
  // li.setAttribute('user_id', data.user_id);
}

var listen = document.querySelector('.list ul');
listen.onclick = function () {
  var e = window.event;
  if (e.target.tagName == 'IMG') {
    var id = e.target.getAttribute('user_id')
    location.href = '../html/DesignerDetail.html?user_id=' + id
  }
}
